import { useState } from "react";
import { Layout, Menu, theme } from "antd";
import Home from "./pages/Home";
import List from "./pages/List";
import "./App.css";
import logo from "./assets/logo.png";
import History from "./pages/History";

const menus = [
  {
    key: "index",
    label: "首页",
  },
  {
    key: "delay",
    label: "Ping延迟",
  },
  {
    key: "history",
    label: "Ping历史",
  },
];

const { Header, Footer, Sider, Content } = Layout;

function RouteContent({ current }) {
  if (current === "index") {
    return <Home />;
  } else if (current === "delay") {
    return <List />;
  } else if (current === "history") {
    return <History />;
  }
}

function App() {
  const [currentMenuKey, setCurrentMenuKey] = useState("index");
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  return (
    <>
      <Layout>
        <Header
          style={{
            display: "flex",
            alignItems: "center",
          }}
        >
          <img className="logo" src={logo}></img>
          <h1 className="title">ProbePing</h1>
          <Menu
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={[currentMenuKey]}
            items={menus}
            style={{
              flex: 1,
              minWidth: 0,
            }}
            onClick={(e) => setCurrentMenuKey(e.key)}
          />
        </Header>
        <Content>
          <div
            style={{
              background: colorBgContainer,
              minHeight: "80vh",
              borderRadius: borderRadiusLG,
            }}
          >
            <RouteContent current={currentMenuKey}></RouteContent>
          </div>
        </Content>
        <Footer
          style={{
            textAlign: "center",
          }}
        >
          ProbePing ©{new Date().getFullYear()} Created by LIZZ
        </Footer>
      </Layout>
    </>
  );
}

export default App;
